<template>
    <div style="margin-top: 75px">
        <h3>各国系销量占比漏斗图</h3>
        <div id="thisYear" style="width: 100%;height:400px; margin-top: 75px;"></div>
    </div>
</template>

<script>
    export default{
        data() {
            return {}
        },
        mounted() {
            this.setChart();
        },
        methods: {
            setChart() {
                this.$http({
                    url: this.$http.adornUrl(this.$route.meta['url']),
                    method: 'get',
                }).then(form => {
                    if (form.data.status == "0") {
                        let data = form.data;
                        let thisYear = this.$echarts.init(document.getElementById('thisYear'));
                        // 指定图表的配置项和数据
                        console.log(data);
                        let datum = data['series'].map(e => e['data'][0]);
                        let legend = data['series'].map(e => e['name']);
                        console.log(datum);
                        console.log(legend);
                        let option = {
                            title: {
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c}%"
                            },
                            toolbox: {
                                feature: {
                                    dataView: {readOnly: false},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            legend: {
                                data: legend,
                            },

                            series: [
                                {
                                    name:'漏斗图',
                                    type:'funnel',
                                    left: '10%',
                                    top: 60,
                                    //x2: 80,
                                    bottom: 60,
                                    width: '80%',
                                    // height: {totalHeight} - y - y2,
                                    min: 0,
                                    max: 100,
                                    minSize: '0%',
                                    maxSize: '100%',
                                    sort: 'descending',
                                    gap: 2,
                                    label: {
                                        show: true,
                                        position: 'inside'
                                    },
                                    labelLine: {
                                        length: 10,
                                        lineStyle: {
                                            width: 1,
                                            type: 'solid'
                                        }
                                    },
                                    itemStyle: {
                                        borderColor: '#fff',
                                        borderWidth: 1
                                    },
                                    emphasis: {
                                        label: {
                                            fontSize: 20
                                        }
                                    },
                                    data: datum,
                                }
                            ]
                        };
                        thisYear.setOption(option);
                        window.addEventListener('resize', function () {
                            thisYear.resize()
                        });
                    } else {
                        this.$message("数据有误，请等待管理员处理")
                    }
                });
            },
        },
    }
</script>

<style scoped>

</style>